<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  const codeText = ref()
  onLoad((options:any) => {
    codeText.value = options.codeText
  })
  const copyValue = (value:string) => {
    uni.setClipboardData({
      data:value
    })
  }
</script>

<template>
  <xx-title title="学校报名操作"/>
  <view class="school-body">
    <view class="school-title">学院报名流程</view>
    <view class="school-tips">
      <view class="school-left">
        <up-icon name="info-circle-fill" color="#e6a23c" size="14"></up-icon>
      </view>
      <view class="school-right">
        <view class="tips">温馨提示</view>
        <view class="tips-content">
          请您在报名截至时间之前前往规定网址填写人员信息，否则将会影响到学员分班情况！请知晓！
          报名使用方式附在下方
        </view>
      </view>
    </view>
    <view class="school-content">
      <view class="content-body-qrcode">
        <view class="web-code">
          <view class="web-info">
            学员信息填写网址：{{`${$Prefix}/#/`}}
            <text class="web-copy" @click="copyValue(`${$Prefix}/#/`)">
              复制
            </text>
          </view>

        </view>
      </view>


      <view class="school-content-title">操作说明</view>
      <view class="content-body">
        <view class="text" style="font-weight: bold;font-size: 28rpx"> 1. <text @click="copyValue('https://star.ihehang.com/#/')">“复制”</text>链接至浏览器打开报名界面（若您是第一次使用该报名系统，请<text style='color: red;'>先注册账号，注册时请填写邀请码</text>{{codeText}}<text @click="copyValue(codeText)">复制</text>）</view>
       <view class="text"> 2. 填写所有体育学员相关报名信息后，点击提交跳转缴费页面进行缴费</view>
       <view class="text"> 3. 请完整、准确填写学员相关信息，此信息后期会用于学员分班、训练装备购买等相关事项，请认真填写！</view>
       <view class="text"> 4. 若您是第一次使用，请您先注册账号，注册时需要您填写邀请码，邀请码在上方</view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
.school-body{
  padding: 20rpx;
  .school-title{
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
    margin-bottom: 20rpx;
  }
  .school-tips{
    width: 100%;
    padding: 12rpx 16rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    border-radius: 8rpx;
    position: relative;
    display: flex;
    background-color: #fdf6ec;
    color: #e6a23c;
    .school-right{
      width: calc(100% - 28rpx);
      margin-left: 4rpx;
      font-size: 26rpx;
      .tips{
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }
      .tips-content{
        line-height: 1.8;
      }
    }
  }
  .school-content{
    .content-body-qrcode{
      margin-top: 20rpx;
      .web-code{
        margin-bottom: 20rpx;
        font-size: 32rpx;
        .web-info{
          display: inline-block;
          font-weight: bold;
        }
        .web-copy{
          display: inline-block;
          margin-left: 10rpx;
          color: #0c82ea;
        }
      }
    }
    .school-content-title{
      font-size: 30rpx;
      font-weight: bold;
      color: #303133;
      margin-bottom: 20rpx;
    }
    .content-body{
      font-size: 30rpx;
      color: #1f1f1f;
      .text{
        margin-bottom: 10rpx;
        line-height: 1.8;
        text{
          color: #0c82ea;
          text-decoration: #0c82ea;
        }
      }
    }
  }
}
</style>
